<nz-drawer
  nzClosable="false"
  [nzExtra]="extra"
  nzPlacement="right"
  [nzTitle]="drawTitle"
  [nzBodyStyle]="{'padding-top': '12px'}"
  [nzWidth]="950"
  [nzVisible]="visible"
  (nzOnClose)="close.emit()">
  <ng-template #drawTitle><span style="display:inline-block;padding: 0 5px; font-weight: 600">{{user?.name}} ({{user?.keyId}})</span></ng-template>
  <ng-container *nzDrawerContent>
    <nz-tabset class="no-bottom-line">
      <nz-tab i18n-nzTitle="@@common.feature-flag" nzTitle="Feature Flag">
        <div class="table-content-area">
          <div class="table-search-area">
            <div class="search-inputs">
              <nz-input-group [nzPrefix]="prefixIconSearch">
                <input nz-input type="text" placeholder="Filter by name or keyName" i18n-placeholder="@@users.idx.filter-by-name-or-keyname" [(ngModel)]="flagFilter.searchText" (ngModelChange)="doSearchFlags(true)">
              </nz-input-group>
              <ng-template #prefixIconSearch>
                <i nz-icon nzType="icons:icon-search"></i>
              </ng-template>
            </div>
          </div>
          <div class="table-wrapper">
            <nz-table #flagstable nzSize="small"
                      [nzData]="flags.items"
                      [nzFrontPagination]="false"
                      [nzLoading]="isFlagsLoading"
                      [nzTotal]="flags.totalCount"
                      [(nzPageSize)]="flagFilter.pageSize"
                      (nzPageSizeChange)="doSearchFlags()"
                      [(nzPageIndex)]="flagFilter.pageIndex"
                      (nzPageIndexChange)="doSearchFlags()">
              <thead>
              <tr>
                <th nzWidth="30%" i18n="@@common.name">Name</th>
                <th nzWidth="30%">Key</th>
                <th nzWidth="30%" i18n="@@common.variation">Variation</th>
                <th i18n="@@common.actions">Actions</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of flagstable.data">
                <td>
                  {{item.name}}
                </td>
                <td>
                  <i (click)="copyText($event, item.key)" class="copy-icon" nz-icon nzType="icons:icon-copy"></i>
                  {{item.key}}
                </td>
                <td class="option">
                  <div class="left">
                    <div class="variation-tip {{'tip-' + getMatchVariationDisplayOrder(item)}}"></div>
                    <div class="variation-value">{{item.matchVariation}}</div>
                  </div>
                  <i class="expand-icon" *ngIf="['json', 'string'].includes(item.variationType)" nz-icon nzType="expand" (click)="expandVariationOption(item.matchVariation, item.variationType)"></i>
                </td>
                <td>
                  <a style="color:#23AD7F;" (click)="navigateToFlag(item.key)" i18n="@@common.details">Details</a>
                </td>
              </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
      </nz-tab>

      <nz-tab i18n-nzTitle="@@common.segments" nzTitle="Segments">
        <div class="table-content-area">
          <div class="table-search-area">
            <div class="search-inputs">
              <nz-input-group [nzPrefix]="prefixIconSearch">
                <input nz-input type="text" placeholder="Filter by name" i18n-placeholder="@@common.filter-by-name" [(ngModel)]="segmentFilter" (ngModelChange)="filterSegments()">
              </nz-input-group>
              <ng-template #prefixIconSearch>
                <i nz-icon nzType="icons:icon-search"></i>
              </ng-template>
            </div>
          </div>
          <div class="table-wrapper">
            <nz-table #segstable nzSize="small" [nzFrontPagination]="true" [nzData]="filteredSegments" [nzLoading]="isSegmentsLoading">
              <thead>
              <tr>
                <th nzWidth="30%" i18n="@@common.name">Name</th>
                <th nzWidth="30%" i18n="@@common.type">Type</th>
                <th nzWidth="30%" i18n="@@common.last-updated">Last updated</th>
                <th i18n="@@common.actions">Actions</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let item of segstable.data">
                <td>{{item.name}}</td>
                <td>{{item.type}}</td>
                <td>
                  {{item.updatedAt | date: 'yyyy-MM-dd HH:mm:ss'}}
                </td>
                <td>
                  <a style="color:#23AD7F;" (click)="navigateToSegment(item.id)" i18n="@@common.details">Details</a>
                </td>
              </tr>
              </tbody>
            </nz-table>
          </div>
        </div>
      </nz-tab>
    </nz-tabset>
  </ng-container>
  <ng-template #extra>
    <i (click)="close.emit()" nz-icon nzType="icons:icon-close"></i>
  </ng-template>
</nz-drawer>

<nz-modal
  [nzWidth]='800'
  nzClassName="option-value-editor"
  [nzClosable]="true"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  [(nzVisible)]="optionValueExpandVisible"
  (nzOnCancel)="optionValueExpandVisible=false">
  <ng-template #modalTitle><ng-container i18n="@@common.variation"></ng-container></ng-template>
  <ng-template #modalContent>
    <nz-code-editor style="height: 400px" class="editor" (nzEditorInitialized)="formatCode($event)" [(ngModel)]="variation" [nzEditorOption]="{ language: variationType, theme: 'vs-dark' }"></nz-code-editor>
  </ng-template>
  <ng-template #modalFooter>
    <div style="display: flex;justify-content: space-between">
      <button nz-button nzType="default" (click)="formatCode()" i18n="@@common.format">Format</button>
      <div>
        <button nz-button nzType="default" (click)="optionValueExpandVisible=false" i18n="@@common.close">Close</button>
      </div>
    </div>
  </ng-template>
</nz-modal>
